<!-- 选人组件，单选 -->
<template>
	<van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet" title="人员" cancel-text="确定">
		<view class="topsearch text-blue">
			<van-field v-model="filterText" label="" placeholder="输入关键字进行过滤" :clearable="true" />
		</view>
		<view class="my-container">
			<view class="tree-left">
				<ly-tree :tree-data="treeData" :props="props" ref="drafter" node-key="deptId"
					:default-expanded-keys="expandKeys" @node-click="handleNodeClick"
					:filter-node-method="filterNode" :highlightCurrent="true" :currentNodeKey="currentNodeKey"/>
			</view>
			<view class="tree-right">
				<van-radio-group v-model="checkedUserId">
					<view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
					<van-cell-group>
						<van-cell v-for="(item,index) in userArr" title-style="margin-left:15rpx" :title="item.userName"
							clickable @click="selectUser(item.userId,item.userName)">
							<template #icon>
								<van-radio :name="item.userId" icon-size="30rpx" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</view>
		</view>
	</van-action-sheet>
</template>

<script>
	export default {
		props: {
			showDrafter: {
				type: Boolean,
				default: false
			},
      drafterData:{
        userName:{
          type:String,
          default:''
        },
        userId:{
          type:String,
          default:''
        }
      },
		},

		data() {
			return {
				showCompo: false, //当前组件是否显示
				expandKeys: ["0","002","002001"], //默认展开的节点-对应的deptId的值
				props: function() {
					return {
						// 这里的label就可以使用函数进行自定义的渲染了
						// label(data, node) {
						// 	return '节点' + node.data.personName;
						// },
						label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
						children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
				filterText: '',
				treeData: [],
				deptName: [], //选中的单位信息
				deptCode: [], //选中的单位信息
				dept: '',
				deptId:'',
				userArr:[],//当前单位下的所有人员
				checkedUserId:'',//选中的人id
				checkedUserName:'',//选中人的姓名
				emptyData:true,//如果没有数据显示暂无数据
				//选中的人员信息
				userInfo:{
					userId:'',
					userName:''
				},
        showNode:'',//要显示的机构节点
        hideNode:'',//要隐藏的机构节点
        page:1,
        rows:100,
        currentNodeKey:""
			}
		},
		mounted() {
			//获取要显示的组织机构代码
			this.getShowDept()
      // //获取当前用户所在的处室信息
      this.cuserchudept()
		},
		watch: {
			showDrafter(val){
				this.showCompo = val
			},
			filterText(val) {
				this.$refs.drafter.filter(val);
			},
      drafterData:{
        handler(nVal, oVal) {
          if(nVal && nVal.userId != ''){
            this.checkedUserId=nVal.userId
            this.checkedUserName = nVal.userName
          }
        },
        immediate: true,
        deep: true
      }
		},
		methods: {
			closeSheet(){
				//关闭的时候把选中的人的信息传回父组件
				this.userInfo.userId =this.checkedUserId
				this.userInfo.userName = this.checkedUserName
				this.$emit('closeDrafterSheet',this.userInfo)
			},
			// 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
			handleRadioChange(obj) {
				// console.log("obj: " + JSON.stringify(obj));
				if(obj.checked == true){//{"checked":false,"node":{"time":1629361630143,"id":3459,"text":null,"checked":false,"indeterminate":false,"data":{"deptId":"002001","deptCode":"002001","deptName":"华北管理局","leaderId":"sysadmin","parentId":"002","allParentId":"0,002,002001","deptLevel":1,"sort":36,"deptType":"org","divisionId":"--","telephone":"11","address":"1","zipCode":"1     ","extend1":"华北管理局","extend2":null,"extend3":null,"extend4":null,"extend5":null,"extend6":"002001","extend7":null,"extend8":null,"extend9":null,"extend10":null,"isValid":"1","createUser":"CAAC_SYSTEM","createTime":"2021-07-27T12:30:00.011+0000","updateUser":null,"updateTime":null,"depth":null}}
					// console.log(obj.node.data.deptName)//单位名称
					// console.log(obj.node.data.deptId)//单位id
					this.dept = obj.node.data.deptName
					this.deptId = obj.node.data.deptId
				}else{
					this.dept = ''
					this.deptId = ''
				}
				// console.log('handleRadioChange', obj);
			},

			// 选人
			handleNodeClick(obj) {
				console.log(obj.data.deptName)//单位名称
				console.log(obj.data.deptId)//单位id
				this.dept = obj.data.deptName
				this.deptId = obj.data.deptId
				this.getUserInfo()
				// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			//呈报单位查询
			filterNode(value, data) {
				if (!value) return true;
				return data.deptName.indexOf(value) !== -1;
			},

			onSelectDocType(item) {
				this.docType = item.name
				this.showDocType = false
			},
			formatDate(date) {
				return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			},

      //获取要显示的组织机构代码
      getShowDept() {
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/authority/gljfw/getShowDept/` + this.cache.get('userInfo').deptId),
          method: 'get',
          params: this.$http.adornParams({
            'systemKey': this.cache.get('userInfo').systemKey,//固定值
            'systemFlag': this.cache.get('userInfo').systemFlag//固定值
          })
        }).then(({data}) => {
          if (data.code == 200) {
            if (data.data != null) {
              this.showNode = data.data.hideDepts
              this.hideNode = ''//要隐藏的节点
            }
            this.getOrgTree()
          }
        })
      },

			getOrgTree(){
				this.$http({
				  url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
				  method: 'get',
				  params: this.$http.adornParams({
					  'systemKey': this.cache.get('userInfo').systemKey,//固定值
					  'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
					  'showNode':this.showNode,//只查管理局的树
            'hideNode':this.hideNode
				  })
				}).then(({data}) => {
					// console.log("单位信息data: " + JSON.stringify(data.data));
					if(data.code==200){
						this.treeData = this.util.treeDataTranslate(data.data,'deptId','parentId')
						// console.log("orgTree: " + JSON.stringify(orgTree));

					}
				})
			},

			//获取呈报人列表
			getUserInfo(){
				this.userArr=[]//每次获取清空
				this.emptyData = false
				var _this = this
				this.$http({
				  url: this.$httploading.adornUrl(`/caac/platform/org/users/getUserByDeptIdAndParams`),
				  method: 'get',
				  params: this.$http.adornParams({
					  'deptId': this.deptId,//单位id
					  'page': this.page,
					  'rows': this.rows,
					  'systemKey': this.cache.get('userInfo').systemKey, //固定值
					  'systemFlag': this.cache.get('userInfo').systemFlag, //固定值
				  })
				}).then(({data}) => {
					// console.log("data: " + JSON.stringify(data));
					if(data.code==200){
						if(data.data.total>0){
							this.userArr=data.data.rows
						}else{
							this.emptyData = true
						}
					}
				})
			},
			//选中的用户
			selectUser(userId,userName){
				if(userId == this.checkedUserId){
					this.checkedUserId = ""//如果再次点击，则取消选中
					this.checkedUserName=""
				}else{
					this.checkedUserId = userId
					this.checkedUserName = userName
				}
			},

      //获取当前用户所在的处室信息
      cuserchudept(){
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/comm/comm/cuserchudept`),
          method: 'get',
          params: this.$http.adornParams({
            'systemKey': this.cache.get('userInfo').systemKey,//固定值
            'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
          })
        }).then(({data}) => {
          console.log("获取当前用户所在的处室信息: " + JSON.stringify(data.data));
          if(data.code==200){
            if(this.util.isNotEmpty(data.data)){
              this.expandKeys=[]
              data.data.allParentId.split(',').forEach((item)=>{
                this.expandKeys.push(item.toString())
              })
              this.deptId = data.data.deptCode
              this.currentNodeKey = this.deptId
              this.getUserInfo()
            }

            // console.log("orgTree: " + JSON.stringify(orgTree));

          }
        })
      },

		}
	}
</script>

<style>
	.van-action-sheet {
		z-index: 9999;
		min-height: 100%;
	}
	.topsearch{
		position: fixed;
		height: 90rpx;
		z-index: 99;
		width: 100%;
		border: 1rpx solid #f0f0f0;
	}
	.my-container{
		margin-top: 90rpx;
		display: flex;
		flex-direction: row;
	}
	.tree-left{
		margin-top: -20rpx;
		width: 65%;
		border-right: 1rpx solid #f0f0f0;
	}
	.tree-right{
		width: 35%;
		position: fixed;
		right: 0rpx;
		max-height: 750rpx;
		overflow: scroll;
	}
</style>
